<template>
    <div class="home">
      <!-- 导航栏 -->
      <van-nav-bar class="title" fixed>
          <van-button 
          type="info" 
          icon="search" 
          class="search-btn" 
          size="small"
          round
          slot="title"
          to="/search"
          >搜索</van-button>
      </van-nav-bar>

      <!-- 标签栏 -->
      <van-tabs v-model="active" animated swipeable class="tabs-item">
        <van-tab v-for="obj in channel" :key="obj.id" 
        :title="obj.name"
         >
        <!-- 文章列表模块 -->
        <Articlelist :channel="obj"></Articlelist>
        <!-- /文章列表模块 -->
        </van-tab>
             <div slot="nav-right" class="placeholder"></div>
              <div slot="nav-right" class="hanbao" @click="iSshow = true">
                <i class="toutiao toutiao-gengduo"></i>
              </div>
        </van-tabs>

      <!-- 频道编辑弹出层 -->
      <van-popup
        v-model="iSshow"
        closeable
        position="bottom"
        close-icon-position="top-left"
        :style="{ height: '100%' }"
        >
        <!-- 传递channels 传递active高亮索引-->
            <ChannelEdit :active="active" :myChannels='channel' @update-active='onUpdateActive'></ChannelEdit>
       </van-popup>
      <!-- /频道编辑弹出层 -->
  </div>
</template>

<script>
// 导入获取用户频道的接口方法
import {getUserchannel} from '@/api/user'
// 导入频道编辑 子组件
import ChannelEdit from './components/channel-edit.vue'
// 导入文章列表模块
import Articlelist from './components/Article-list'
import {mapState} from 'vuex'
import {getItem} from '@/utils/storage'
export default {
  name: 'homeindex',
  props: {},
  components: {
    Articlelist,
    ChannelEdit
  },
  data () {
   return {
     active:0,
     channel:[] ,// 用来保存接口数据
     iSshow:false // 用于频道编辑弹出层的显示和隐藏
   }
  },
  computed: {
    ...mapState(['user'])
  },
  watch: {},
  methods: {
    async loadgetUserchannel() {
      try {
        const {data} = await getUserchannel()
        // console.log(res);
        this.channel = data.data.channels
      }catch (err) {
        console.log('获取用户频道失败',err);
      }
    },
    onUpdateActive(index,iSshow = true) {
      // 更新激活高亮的频道项
      this.active = index,
      // 关闭编辑频道弹层
      this.iSshow = iSshow
    },
    async loadChannels() {
      try {
        let channels=[] // 用于更新最新的数据
        if(this.user) {
          // 已登录，请求获取线上的频道数据
          const {data} = await getUserchannel()
          channels = data.data.channels
        }else {
          // 未登录
          const localChannels = getItem('TOUTIAO_CHANNELS')
          if(localChannels) {
            // 有本地频道数据，就使用
            channels = localChannels
          }else {
            // 没有本地频道数据，则请求获取默认推荐的频道列表
             const {data} = await getUserchannel() //这时获取到的是“默认的频道列表”（没有token） 
             channels = data.data.channels   
          }
        }
        // 将数据更新到组件中
        this.channel = channels
      }catch (err) {
        console.log(err);
        this.$toast('获取频道列表失败')
      } 
    }
  },
  created () {
    // 页面一打开，就执行方法
    this.loadgetUserchannel()
  },
  mounted () {
  },
}
</script> 

<style scoped lang="less">
.home {
    padding-top:174px;
    padding-bottom: 100px;

  .van-nav-bar {
    background-color: #3296fa;
  }
  .search-btn {
    color:#fff;
    width: 555px;
    height: 64px;
    font-size: 28px;
    text-align: center;
    line-height: 64px;
    .van-icon {
      font-size: 32px;
    }
    i {
      color: #fff;
    }
  }
  /deep/.van-nav-bar__title {
    max-width: unset ;
  }
}
/deep/ .tabs-item { //这里只需要给父节点tabs-item添加/deep/,这样下边的子节点都会生效
          .van-tabs__wrap {
            position: fixed;
            top: 92px;
            z-index: 1;
            left: 0;
            right: 0;
            height: 82px;
          }
             .van-tab {
                border-right: 1px solid #edeff3;
                min-width: 200px;
                font-size: 30px;
                color: #777777;
            }
            .van-tab--active {  
                 color: #333333;
            }
            .van-tabs__nav {  
                padding-bottom: 0;
            }
            .van-tabs__line { 
                bottom: 8px;
                width: 31px !important;
                height: 6px;
                background-color: #3296fa;
              }
              .hanbao{
                position: fixed;
                right:0;
                width: 66px;
                height: 82px;
                display: flex;
                justify-content:center;
                align-items: center;
                background-color: #fff;
                opacity: 0.902;
                i.toutiao {
                          font-size: 33px;
                        }
                 &:before { //找到父节点，添加伪元素（这个是汉堡按钮与tab之间的一个竖线）
                        content: "";
                        position: absolute;
                        left: 0;
                        width: 2px;//在模拟器上看不到（手机上没问题），如果想看到改为2px
                        height: 100%;
                        background-image: url(~@/assets/gradient-gray-line.png);
                        background-size: contain;
                  }
             
              }
     
  }
</style>